import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Button, Radio, Form, Input, Modal, Space, message } from 'antd';
import { useEffect, useState } from 'react';

import { drawBill } from '@/services/orderManage';
import { getErrorMsg } from '@/util/utils';

import styles from './index.less';

interface Props {
  // 查看发票和开发票props
  isInvoiceVisible: boolean;
  setIsInvoiceVisible: (b: boolean) => void;
  openOrSeeTicket: string;
  // 开具发票字段props
  selectKeys?: string[];
  ticketPrice?: number;
  // 状态更新
  handleOkAfter?: () => void;
}

export enum InvoiceTypeEnum {
  View = '查看发票',
  Issue = '开具发票',
}

export default function InvoiceModal(props: Props) {
  const [form] = Form.useForm();
  const { isInvoiceVisible, setIsInvoiceVisible, openOrSeeTicket, selectKeys, ticketPrice, handleOkAfter } = props;
  const [radioValue, setRadioValue] = useState(1);

  useEffect(() => {
    form.setFieldsValue({
      amount: ticketPrice?.toFixed(2),
    });
    return () => {
      form.resetFields();
    };
  });

  const handleOk = () => {
    form.validateFields().then(async () => {
      const formData = form.getFieldsValue();
      const payload = {
        invoiceType: radioValue,
        saasOrderIds: selectKeys,
        ...formData,
        amount: Number(formData.amount),
      };
      const res = await drawBill(payload);
      if (res.code===200) {
        setIsInvoiceVisible(false);
        form.resetFields();
        if (handleOkAfter) {
          handleOkAfter();
        }
        message.success('开发票申请成功!');
      } else {
        message.error(getErrorMsg(res));
      }
    });
  };

  const handleChangeRadio = (e: any) => {
    setRadioValue(e.target.value);
  };

  return (
    <Modal
      destroyOnClose
      title={openOrSeeTicket}
      onCancel={() => {
        setIsInvoiceVisible(false);
        form.resetFields();
      }}
      visible={isInvoiceVisible}
      footer={
        openOrSeeTicket === InvoiceTypeEnum.View
          ? null
          : [
            <Button
              key="cancel"
              onClick={() => {
                setIsInvoiceVisible(false);
              }}
            >
              取消
            </Button>,
            <Button
              style={{ background: '#1A3DC9', color: '#fff' }}
              key="submit"
              onClick={handleOk}
            >
              {'确定'}
            </Button>,
          ]
      }
    >
      {openOrSeeTicket === InvoiceTypeEnum.View ? (
        <div className={styles.invoiceInfo}>
          {/*发票水印*/}
          <div className={styles.outside}>
            <div className={styles.inner}>发票已发送</div>
            {/*<div className={styles.inner}>发票已开取</div>*/}
          </div>
          <div>
            <div className={styles.title}>发票类型</div>
            <div>{'增值税专用发票'}</div>
          </div>
          <div>
            <div className={styles.title}>运单号</div>
            <div>{'SF1025740228495'}</div>
          </div>
          <div>
            <div className={styles.title}>开票信息</div>
            <div>
              发票内容：<span>{}</span>
            </div>
            <div>
              发票金额：<span style={{ color: '#EF4859' }}> ￥{'36,000.66'}</span>
            </div>
            <div>
              发票抬头：<span>{}</span>
            </div>
            <div>
              税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
              <span>{'334444301016719100082788'}</span>
            </div>
            <div>
              注册地址：<span>{'江苏省南京市雨花台区软件大道109号雨花客厅3幢910'}</span>
            </div>
            <div>
              注册电话：<span>{}</span>
            </div>
            <div>
              开户银行：<span>{}</span>
            </div>
            <div>
              银行账号：<span>{'4301016719100082788'}</span>
            </div>
          </div>
          <div>
            <div className={styles.title}>收票信息</div>
            <div>
              收票人：<span>{'战神'}</span>
            </div>
            <div>
              联系电话：<span>{13888888888}</span>
            </div>
            <div>
              邮寄地址：<span>{'japan'}</span>
            </div>
          </div>
        </div>
      ) : (
        <Form
          form={form}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 19 }}
          autoComplete="off"
        >
          <div className={styles.ticketType}>发票类型</div>
          {/*<Form.Item label="" name="invoiceType">*/}
            <Radio.Group style={{ marginLeft: 20 }} onChange={handleChangeRadio} value={radioValue}>
              <Space direction="horizontal">
                <Radio value={1}>增值税普通发票</Radio>
                <Radio value={2}>增值税专用发票</Radio>
              </Space>
            </Radio.Group>
          {/*</Form.Item>*/}
          <div className={styles.ticketType}>开票信息</div>
          <Form.Item label="发票金额" name="amount">
            <Input disabled placeholder="请输入发票金额"/>
          </Form.Item>
          <Form.Item label="公司名称" name="title" rules={[{ required: true, message: '请输入公司名称' }]}>
            <Input placeholder="请输入公司名称"/>
          </Form.Item>
          <Form.Item label="税   号" name="taxNo" rules={[{ required: true, message: '请输入税   号' }]}>
            <Input maxLength={20} placeholder="请输入税   号"/>
          </Form.Item>
          <Form.Item label="注册地址" name="registeredAddress"
                     rules={radioValue === 1 ? [] : [{ required: true, message: '请输入注册地址' }]}>
            <Input placeholder="请输入注册地址"/>
          </Form.Item>
          <Form.Item label="注册电话" name="registeredTelephone"
                     rules={radioValue === 1 ? [] : [{ required: true, message: '请输入注册电话' }]}>
            <Input placeholder="请输入注册电话"/>
          </Form.Item>
          <Form.Item label="开户银行" name="bankName"
                     rules={radioValue === 1 ? [] : [{ required: true, message: '请输入开户银行' }]}>
            <Input placeholder="请输入开户银行"/>
          </Form.Item>
          <Form.Item label="银行账号" name="bankAccount"
                     rules={radioValue === 1 ? [] : [{ required: true, message: '请输入银行账号' }]}>
            <Input placeholder="请输入银行账号"/>
          </Form.Item>
          {/*<Form.Item label="备注说明" name="remark">*/}
          {/*  <Input disabled placeholder="请输入备注说明"/>*/}
          {/*</Form.Item>*/}
          <div className={styles.ticketType}>收票人信息</div>
          <Form.Item label="联系人" name="contactName">
            <Input placeholder="请输入联系人"/>
          </Form.Item>
          <Form.Item label="联系电话" name="contactNo">
            <Input placeholder="请输入联系电话"/>
          </Form.Item>
          <Form.Item label="电子邮箱" name="email">
            <Input placeholder="请输入电子邮箱"/>
          </Form.Item>
          <Form.Item label="收件地址" name="postAddress">
            <Input placeholder="请填写准确的收件地址，我们将把发票邮寄给您"/>
          </Form.Item>
          <Form.Item style={{ marginTop: 40 }}>
            <div className={styles.contractModal}>
              <ExclamationCircleOutlined/>
              <div style={{ marginLeft: 10, marginTop: -3 }}>
                <span>
                  我们将会在最晚 7 个工作日内将增值税普通发票（电子）发送至您的邮箱，请注意查收。
                </span>
                <div>电子发票只能开具一次，请仔细核对后再进行提交。</div>
              </div>
            </div>
          </Form.Item>
        </Form>
      )}
    </Modal>
  );
}
